// 浏览器一屏幕的宽度和高度
let maxWidth = document.documentElement.clientWidth || document.body.clientWidth
let maxHeight = document.documentElement.clientHeight || document.body.clientHeight
// 盒子自身宽度和高度值
let box = document.getElementById('box')

// 盒子水平运动的最大宽度是maxWidth-boxWidth （盒子永远不出浏览器）
// 需求：让BOX盒子从最左边运动到最右边(结束) [修改BOX的LEFT值即可]
// 永远注意一点offsetLeft只读 不能设置  box.style.left才是设置的
// 固定步长每隔13ms向右运动5px
// let minL = 0
// let maxL = maxWidth - box.offsetWidth
// let step = 5
// let timer = setInterval(function () {
//     box.style.left = box.offsetLeft + step + 'px'
//     if (box.offsetLeft >= maxL) {
//         box.style.left = maxL + 'px'
//         clearInterval(timer)
//     }
// }, 13)

// 固定总时间的匀速运动
let maxL=maxWidth-box.offsetWidth
let duration = 1000,//总时间
time = 0,
interval=17,
begin=0,
target=maxL

let timer1 = setInterval(function () {
    time += interval
    box.style.left = time * target / 1000 + 'px'
    if (time >= duration) {
        box.style.left = target + 'px'
        clearInterval(timer1)
    }
}, interval)


